<template>
  <div>
    <a-card>
      <a-form :form="form">
        <a-row>
          <a-col :md="20" :sm="24">
            <a-col :md="12" :sm="24">
              <a-form-item
                label="导师类型"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select v-decorator="['dslx',
                  {
                    rules: [{ required: true, message: '请选择导师类型!' }],
                  }]">
                  <a-select-option v-for="i in LHPYJDDSLX" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="导师编号"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input  v-decorator="['dsbh',
                  {
                    rules: [{ required: true, message: '请输入导师编号!' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="所属基地"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select showSearch optionFilterProp="children" v-decorator="['jdId',
                  {
                    rules: [{ required: true, message: '请选择所属基地!' }],
                  }]">
                  <a-select-option v-for="i in this.lhpyjd" :key="i.lhpyjdmc" :value="i.id">{{ i.lhpyjdmc }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="所属单位"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input  v-decorator="['dwmc',
                  {
                    rules: [{ required: true, message: '请输入所属单位!' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="姓名"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['xm',
                  {
                    rules: [{ required: true, message: '请输入导师姓名!' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="姓名拼音"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['xmpy',
                  {
                    rules: [{ required: true, message: '请输入导师姓名拼音!' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="性别"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select allowClear v-decorator="['xb',
                  {
                    rules: [{ required: true, message: '请选择性别!' }],
                  }]">
                  <a-select-option v-for="i in TYPE0011" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="出生日期"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-date-picker v-decorator="['csrq',
                  {
                  }]" style="width: 100%" format="YYYY-MM-DD"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="身份证件类型"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select allowClear v-decorator="['sfzlxm',
                  {
                    rules: [{ required: true, message: '请选择身份证件类型!' }],
                  }]">
                  <a-select-option v-for="i in TYPE0088" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="身份证号码"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['sfzhm',
                  {
                    rules: [{ required: true, message: '请输入身份证号码' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="电子邮箱"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['dzyx',
                  {
                    rules: [{ required: true, message: '电子邮箱' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="起聘日期"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-date-picker v-decorator="['qpsj',
                  {
                    rules: [{ required: true, message: '请选择起聘日期' }],
                  }]" style="width: 100%" format="YYYY-MM-DD"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="解聘日期"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-date-picker v-decorator="['jpsj',
                  {
                    rules: [{ required: true, message: '请选择解聘日期' }],
                  }]" style="width: 100%" format="YYYY-MM-DD"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="手机号码"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['sjhm',
                  {
                    rules: [{ required: true, message: '请输入手机号码!' }],
                  }]">
                </a-input>
              </a-form-item>
            </a-col>

            <a-col :md="12" :sm="24">
              <a-form-item
                label="职称"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select v-decorator="['zc',
                  {
                    rules: [{ required: true, message: '请选择职称' }],
                  }]">
                  <a-select-option v-for="i in TYPE0342" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="最后学历"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select v-decorator="['zhxlm',
                  {
                    rules: [{ required: true, message: '请选择最后学历' }],
                  }]">
                  <a-select-option v-for="i in TYPE0018" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="最后学位"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select v-decorator="['zhxwm',
                  {
                    rules: [{ required: true, message: '请选择最后学位' }],
                  }]">
                  <a-select-option v-for="(i,index) in TYPE0023" :key="index" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>


            <a-col :md="12" :sm="24">
              <a-form-item
                label="国籍"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select v-decorator="['gj',
                  {
                    rules: [{ required: true, message: '请选择国籍' }],
                  }]">
                  <a-select-option v-for="i in TYPE0015" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="民族"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select v-decorator="['mz',
                  {
                  }]">
                  <a-select-option v-for="i in TYPE0017" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="政治面貌"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select v-decorator="['zzmm',
                  {
                     rules: [{ required: true, message: '请选择政治面貌' }],
                  }]">
                  <a-select-option v-for="i in TYPE0020" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md="12" :sm="24">
              <a-form-item
                label="文化程度"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select v-decorator="['whcd',
                  {
                     rules: [{ required: true, message: '请选择文化程度!' }],
                  }]">
                  <a-select-option v-for="i in WHCD" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="研究方向"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['yjfx',
                  {
                    rules: [{ required: true, message: '请输入研究方向!' }],
                  }]">
                </a-input>
              </a-form-item>
            </a-col>

            <a-col :md="12" :sm="24">
              <a-form-item
                label="毕业院校或机构"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select style="width:50%" @change="handlePChange" placeholder="毕业院校或机构所在省份" v-decorator="['byxxszsf',
                  {
                    rules: [{ required: true, message: '请选择毕业院校或机构所在省份!' }],
                  }]" allowClear>
                  <a-select-option v-for="i in selectMenu.province" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
                </a-select>
                <a-select style="width:50%" v-decorator="['byxxdm']" allowClear>
                  <a-select-option v-for="i in selectMenu.schoolList" :key="i.xxdm" :value="String(i.xxdm)">{{ i.xxmc }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="毕业年月"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-month-picker v-decorator="['byny',{
                    rules: [{ required: true, message: '请选择毕业年月' }],
                  }]"  style="width: 100%" format="YYYY-MM"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="通讯地址"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['txdz',
                  {
                    rules: [{ required: true, message: '请输入通讯地址!' }],
                  }]">
                </a-input>
              </a-form-item>
            </a-col>

            <a-col :md="12" :sm="24">
              <a-form-item
                label="宗教信仰"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select v-decorator="['zjxy',
                  {
                  }]">
                  <a-select-option v-for="i in TYPE0001" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="港澳华侨"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select v-decorator="['gahq',
                  {
                  }]">
                  <a-select-option v-for="i in TYPE0037" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="婚姻状况"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select v-decorator="['hyzk',
                  {
                  }]">
                  <a-select-option v-for="i in TYPE0012" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="健康状况"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select v-decorator="['jkzk',
                  {
                  }]">
                  <a-select-option v-for="i in TYPE0013" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="血型"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select v-decorator="['xx',
                  {
                  }]">
                  <a-select-option v-for="i in TYPE0078" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="18">
              <a-form-item style="width:100%"
                           label="出生地"
                           :labelCol="{span: 8,offset: 1}"
                           :wrapperCol="{span: 14, offset: 1}"
                           selfUpdate>
                <a-select style="width:33%" @change="provinceChange" v-decorator="['csdsdm']" :allowClear="true">
                  <a-select-option v-for="i in selectMenu.province" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
                </a-select>
                <a-select style="width:33%" @change="cityChange" v-decorator="['csdcdm']" :allowClear="true">
                  <a-select-option v-for="i in selectMenu.city" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
                </a-select>
                <a-select style="width:33%" v-decorator="['csdxqdm']" :allowClear="true">
                  <a-select-option v-for="i in selectMenu.area" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="18">
              <a-form-item style="width:100%"
                           label="籍贯"
                           :labelCol="{span: 8,offset: 1}"
                           :wrapperCol="{span: 14, offset: 1}"
                           selfUpdate>
                <a-select style="width:33%" @change="provinceNativeChange" v-decorator="['jgsdm']" :allowClear="true">
                  <a-select-option v-for="i in selectMenu.province" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
                </a-select>
                <a-select style="width:33%" @change="cityNativeChange" v-decorator="['jgcdm']" :allowClear="true">
                  <a-select-option v-for="i in selectMenu.nativeCity" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
                </a-select>
                <a-select style="width:33%" v-decorator="['jgxqdm']" :allowClear="true">
                  <a-select-option v-for="i in selectMenu.nativeArea" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="户口类型"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select v-decorator="['hklx',
                  {
                  }]">
                  <a-select-option v-for="i in TYPE0002" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="户口所在地"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['hkszd',
                  {
                  }]">
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="家庭地址"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['jtdz',
                  {
                  }]">
                </a-input>
              </a-form-item>
            </a-col>


            <a-col :md="12" :sm="24">
              <a-form-item
                label="办公电话"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['bgdh',
                  {
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="住宅电话"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['zzdh']"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="邮政编码"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['yzbm']"/>
              </a-form-item>
            </a-col>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="20" :sm="24">
            <a-form-item label="个人简介" :labelCol="{span: 3,offset: 1}" :wrapperCol="{span: 19,offset: 1}">
              <a-input type="textarea" maxLength=300 placeholder="限定300字" v-decorator="['grjj']" :autosize="{ minRows: 4, maxRows: 6 }"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>


    <div class="ant-pro-footer-toolbar">
      <a-button style="float: right;margin-top: 10px;" @click="creatTeacher" :loading="loadingBtn" type="primary">保存</a-button>
    </div>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  import ACol from "ant-design-vue/es/grid/Col";

  const selectArr = ['TYPE0320', 'TYPE0321', 'TYPE0011',"TYPE0078","TYPE0037","TYPE0013","TYPE0012","TYPE0002","WHCD","LHPYJDDSLX"
  ,'TYPE0360', 'TYPE0342', 'TYPE0018', 'TYPE0023','TYPE0088','TYPE0017',"TYPE0015","TYPE0015","TYPE0001","TYPE0020"
]
function getBase64 (img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}
export default {
  data () {
    return {
      selectMenu: {},
      loading: false,
      imageUrl: '',
      loadingBtn: false,
      dsbh: '',
      zsnd: '',
      lhpyjd:[],
    }
  },
  components: {ACol},
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  computed: {
    ...mapState({
      systemInfo: state => state.app.systemInfo,
      TYPE0011: state => state.app['TYPE0011'], // 性别
      TYPE0360: state => state.app['TYPE0360'], // 导师类别
      TYPE0342: state => state.app['TYPE0342'], // 职称
      TYPE0018: state => state.app['TYPE0018'], // 学历
      TYPE0088: state => state.app['TYPE0088'], // 身份证类型
      TYPE0017: state => state.app['TYPE0017'], // 民族
      TYPE0023: state => state.app['TYPE0023'],// 学位
      TYPE0001: state => state.app['TYPE0001'], // 信仰宗教
      TYPE0020: state => state.app['TYPE0020'], // 政治面貌
      TYPE0015: state => state.app['TYPE0015'], // 国籍/地区
      TYPE0002: state => state.app['TYPE0002'], // 户口性质
      TYPE0012: state => state.app['TYPE0012'], // 婚姻状况
      TYPE0013: state => state.app['TYPE0013'], // 健康状况
      TYPE0037: state => state.app['TYPE0037'], // 港澳台侨
      TYPE0078: state => state.app['TYPE0078'], // 血型
      LHPYJDDSLX: state => state.app['LHPYJDDSLX'], // 血型
      WHCD: state => state.app['WHCD'], // 血型
    })
  },
  created () {
    selectArr.forEach(v => {
      this.$store.dispatch('app/setDictionary', v)
    })
    this.$api.base.unionBaseALlForTeacher().then(res=>{
      this.lhpyjd=res.data;
    });
    this.initSelectMenu()
  },
  methods: {
    initSelectMenu () {
      let allRequest = [
        this.$api.base.collegeAll(),
        this.$api.base.areaList()
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          yx: res[0].data,
          province: res[1].data
        }
      })
    },
    handlePChange(v) {
      this.form.setFieldsValue({byxxdm: ''})
      this.$api.base.schoolInfoQueryAll({xzqhsdm: v}).then(res => {
        this.$set(this.selectMenu, 'schoolList' , res.data)
      })
    },
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    setData (option, key) {
      this.form.setFieldsValue({[key]: option.data.attrs.name})
    },
    provinceChange (v) {
      this.form.setFieldsValue({csdcdm: '', csdxqdm: ''})
      if (v) {
        this.$api.base.areaList({parentCode: v}).then(res => {
          this.$set(this.selectMenu, 'city', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'city', [])
      }
      this.$set(this.selectMenu, 'area', [])
    },
    cityChange (v) {
      this.form.setFieldsValue({csdxqdm: ''})
      if (v) {
        this.$api.base.areaList({parentCode: v}).then(res => {
          this.$set(this.selectMenu, 'area', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'area', [])
      }
    },
    provinceNativeChange (v) {
      this.form.setFieldsValue({jgcdm: '', jgxqdm: ''})
      if (v) {
        this.$api.base.areaList({parentCode: v}).then(res => {
          this.$set(this.selectMenu, 'nativeCity', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'nativeCity', [])
      }
      this.$set(this.selectMenu, 'nativeArea', [])
    },
    cityNativeChange (v) {
      this.form.setFieldsValue({jgxqdm: ''})
      if (v) {
        this.$api.base.areaList({parentCode: v}).then(res => {
          this.$set(this.selectMenu, 'nativeArea', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'nativeArea', [])
      }
    },
    creatTeacher () {
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        try {
          this.loadingBtn = true
          for (const key in values) {
            if (['jpsj', 'qpsj', 'csny','byny','csrq'].includes(key) && values[key]) {
              values[key] = values[key].format('YYYY-MM-DD')
            }
          }
          this.$DateToString(values)
          this.$api.baseTeacher.save(values).then(res => {
            this.$message.success(res.msg)
            this.form.resetFields()
          }).finally(() => {
            this.loadingBtn = false
            // this.form.resetFields()
          })
        } catch (error) {
          console.log(error)
        }
      })
    }
  }
}
</script>
